<template>
  <div class="advanced-converter">
    <h2>数字处理工具</h2>

    <!-- 输入区域 -->
    <div class="input-section">
      <textarea
          v-model="inputText"
          placeholder="输入数字（每行一个）...
示例：
123
15555555555
85291234567
+8613812345678"
      ></textarea>
    </div>

    <!-- 功能控制区 -->
    <div class="function-controls">
      <!-- 前缀功能 -->
      <div class="control-card">
        <div class="control-header">
          <label>
            <input type="checkbox" v-model="enablePrefix"> 添加前缀
          </label>
        </div>
        <div class="control-body" v-show="enablePrefix">
          <input
              v-model="prefix"
              type="text"
              placeholder="输入前缀（如：+86）"
              class="styled-input"
          >
        </div>
      </div>

      <!-- 格式转换功能 -->
      <div class="control-card">
        <div class="control-header">
          <label>
            <input type="checkbox" v-model="enableFormat"> 转换格式
          </label>
        </div>
        <div class="control-body" v-show="enableFormat">
          <select v-model="separator" class="styled-select">
            <option value=",">逗号分隔</option>
            <option value=";">分号分隔</option>
            <option value=" ">空格分隔</option>
            <option value="|">竖线分隔</option>
            <option value="\t">制表符分隔</option>
          </select>
        </div>
      </div>
    </div>

    <!-- 处理按钮 -->
    <button @click="processNumbers" class="process-btn">
      开始处理
    </button>

    <!-- 结果展示 -->
    <div class="result-section">
      <div class="result-header">
        <span>处理结果</span>
        <div class="stats">
          原始: {{ originalCount }} → 保留: {{ resultCount }}
          <button @click="copyResult">复制</button>
        </div>
      </div>
      <pre class="result-area">{{ processedResult }}</pre>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 输入数据
const inputText = ref('')

// 前缀功能
const enablePrefix = ref(false)
const prefix = ref('0')

// 格式转换功能
const enableFormat = ref(true)
const separator = ref(',')

// 处理流程
const processedResult = ref('')

// 新验证规则：任意长度纯数字
const numberRegex = /^\d+$/

// 处理逻辑
const processNumbers = () => {
  try {
    // 步骤1：基础处理
    let numbers = inputText.value.split('\n')
        .map(num => num.trim().replace(/\D/g, ''))  // 清理非数字字符
        .filter(num => num.length > 0 && numberRegex.test(num)) // 验证有效数字

    // 步骤2：应用前缀（可选）
    if (enablePrefix.value) {
      numbers = numbers.map(num => `${prefix.value}${num}`)
    }

    // 步骤3：格式转换（可选）
    let result = numbers
    if (enableFormat.value) {
      result = [numbers.join(separator.value)]
    }

    // 输出结果
    processedResult.value = result.join('\n')
  } catch (error) {
    processedResult.value = `处理失败: ${error.message}`
  }
}

// 统计信息
const originalCount = computed(() => {
  return inputText.value.split('\n').filter(l => l.trim()).length
})

const resultCount = computed(() => {
  return processedResult.value.split('\n').filter(l => l.trim()).length
})

// 复制功能
const copyResult = async () => {
  try {
    await navigator.clipboard.writeText(processedResult.value)
    alert('复制成功')
  } catch {
    alert('请手动选择内容复制')
  }
}
</script>

<style scoped>
.advanced-converter {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

textarea {
  width: 100%;
  height: 150px;
  padding: 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  margin: 1rem 0;
  font-family: monospace;
}

.function-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.control-card {
  border: 2px solid #eee;
  border-radius: 8px;
  padding: 1rem;
  background: #f8f9fa;
}

.control-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.control-header label {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.styled-input, .styled-select {
  width: 100%;
  padding: 0.8rem;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s;
}

.styled-input:focus, .styled-select:focus {
  border-color: #2196F3;
  outline: none;
}

.process-btn {
  width: 100%;
  padding: 1.2rem;
  background: linear-gradient(135deg, #2196F3, #1976D2);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: transform 0.2s;
}

.process-btn:hover {
  transform: translateY(-2px);
}

.result-section {
  margin-top: 2rem;
  border-top: 2px solid #eee;
  padding-top: 1.5rem;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.stats {
  color: #666;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.9rem;
}

.result-area {
  white-space: pre-wrap;
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 8px;
  min-height: 100px;
  max-height: 400px;
  overflow: auto;
  line-height: 1.6;
  font-family: monospace;
  user-select: text;         /* 允许文本选择 */
  -webkit-user-select: text; /* 兼容 WebKit 内核浏览器 */
  cursor: text;              /* 显示文本选择光标 */
}
</style>